<template>
  <div class="home">
    <!-- 行 -->
    <el-row>
      <!-- 列 -->
      <!-- :span="24":动态绑定span的属性 -->
      <el-col :span="24">
        <div class="grid-content">24格</div>
      </el-col>
    </el-row>
    <el-row>
      <!-- 列 -->
      <el-col :span="12">
        <div class="grid-content">12格</div>
      </el-col>
    </el-row>
    <el-row>
      <!-- 列 -->
      <el-col :span="12">
        <div class="grid-content">12格</div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content">3格</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'HomeView',
  components: {

  }
}
</script>
<style lang="less">
.el-row {
  margin-bottom: 20px;
  background-color: skyblue;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
  background-color: pink;
}
</style>
